<template>
    <div class="home">
    <!-- 顶部图片 -->
        <div class="logo">
            <img src="../../assets/images/1.jpg" width="100%" alt="">
            <router-link class="select" to="/selectCity">{{city}}=</router-link>
        </div>
        <!-- 病毒信息 -->
        <CovInfo :news='news'/>
        <!-- 疫情小导航 -->
        <div class="list">
            <div>
                <router-link to="/area">
                    <img src="../../assets/images/1.png" alt="">
                    <div>风险地区</div>
                </router-link>
            </div>
            <div>
                <router-link to="/hesuan">
                    <img src="../../assets/images/2.png" alt="">
                    <div>核酸检测</div>
                </router-link>
            </div>
            <div>
                <router-link to="/prevention">
                    <img src="../../assets/images/3.png" alt="">
                    <div>防疫物资</div>
                </router-link>
            </div>
            <div>
                <router-link to="/travel">
                    <img src="../../assets/images/4.png" alt="">
                    <div>出行政策</div>
                </router-link>
            </div>
        </div>
        <!-- 数据统计 -->
        <CovNumber :covData='covData'/>
        <!-- 中国地图 -->
        <ChinaMap />
        <!-- 世界地图 -->
        <WorldMap />
        <VueSwiper />
    </div>
</template>

<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>
<script>
    import CovInfo from './CovInfo/CovInfo.vue'
    import CovNumber from './CovInfo/CovNumber.vue'
    import ChinaMap from './VueEcharts/ChinaMap.vue'
    import WorldMap from './VueEcharts/WorldMap.vue'
    import VueSwiper from './VueSwiper/VueSwiper.vue'
    import api from '../../api/index'
    export default{
        name:'Home',
        data(){
            return{
                covDesc: {},
                news:[],
                covData:{},//全国数据统计
                city: "国内疫情",
            }
        },
        components:{
            CovInfo,
            CovNumber,
            ChinaMap,
            WorldMap,
            VueSwiper
        },
        //离开的时候解除绑定--重复执行 this.$bus.$on
        beforeDestroy(){
            this.$bus.$off('city')
        },
        created(){
            //方式2：获取event-bus
            this.$bus.$on('city',val=>{
            console.log('---val---',val);
            this.city = val;
            })
            //方式1：进入页面获取本地存储
            // let city = localStorage.getItem('city')
            // if(city){
            //   this.city = city+'疫情';
            // }
            api.getCovInfo()
            .then(res=>{
                console.log(res.data);
                console.log(res.data.newslist[0]);
                //病毒介绍信息
                let data = res.data.newslist[0].desc;
                //疫情热点
                this.news = res.data.newslist[0].news;
                console.log('处理好的数据',this.desc); 
                //全国疫情统计信息
                this.covData = {
                    currentConfirmedCount:data.currentConfirmedCount,
                    confirmedCount:data.confirmedCount,
                    suspectedCount:data.suspectedCount,
                    curedCount:data.curedCount,
                    deadCount:data.deadCount,
                    seriousCount:data.seriousCount,
                    suspectedIncr:data.suspectedIncr,
                    currentConfirmedIncr:data.currentConfirmedIncr,
                    confirmedIncr:data.confirmedIncr,
                    curedIncr:data.curedIncr,
                    deadIncr:data.deadIncr,
                    seriousIncr:data.seriousIncr,
                    modifyTime:data.modifyTime
                }
            })
        }
    }


    /**
            currentConfirmedCount 现存确诊
            confirmedCount  累计确诊
            suspectedCount  累计境外输入人数
            curedCount    累计治愈人数
            deadCount   累计死亡人数
            seriousCount  现存无症状人数
            suspectedIncr  新增境外输入人数
            currentConfirmedIncr   相比昨日现存确诊人数
            confirmedIncr  相比昨日累计确诊人数
            curedIncr   相比昨日新增治愈人数
            deadIncr  相比昨日新增死亡人数
            seriousIncr 相比昨日现存无症状人数
            modifyTime 时间
             
             */
</script>

<style scoped lang='less'>
    .logo {
  position: relative;
  .select {
    position: absolute;
    right: 0.2rem;
    top: 0.3rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.1);
    padding: 0.1rem 0.2rem;
    border-radius: 0.2rem;
  }
}
.list {
  display: flex;
  padding-bottom: 0.2rem;
  > div {
    flex: 1;
    text-align: center;
    color: #666;
    img {
      width: 0.8rem;
      height: 0.8rem;
    }
  }
}
</style>